<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '10px' }">
            <template #header>
                <div>
                    <span>{{ addForm.studentNo }}</span>
                </div>
            </template>
            <!-- card body -->
            <el-row type="flex" justify="center" :gutter="12">
                <el-col :span="2">
                <div>
				<img style="width: 70%" src="../assets/preview2.gif" alt />
		        	</div>
                    <div v-if="code>26">
				<img style="width: 70%" src="../assets/preview3.gif" alt />
		        	</div>
                    <div v-if="code>58">
				<img style="width: 70%" src="../assets/preview4.gif" alt />
		        	</div>
                    <div v-if="code>78">
				<img style="width: 70%" src="../assets/preview5.gif" alt />
		        	</div>
                    </el-col>
                <el-col :span="10">
                    <h1 class="test">MBTI职业性格测试</h1>
                    <el-divider></el-divider>
                    <div>{{ title }}</div>
                    <el-row type="flex" justify="center"></el-row>
                    <el-button class="press" @click="chooseA();messageA();turn()">{{ sectionA }}
                    </el-button>
                    <el-row type="flex" justify="center"></el-row>
                    <el-button class="press" @click="chooseB();messageB();turn()">{{ sectionB }}
                    </el-button>

                    <div style="margin: 0 auto">
                        <el-divider></el-divider>
                        <el-row type="flex" justify="center">
                            <el-form-item class="mb-4">
                            </el-form-item>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="2" >
                <div>
				<img style="width: 70%" src="../assets/preview2.gif" alt />
		        	</div>
                    <div v-if="code>26">
				<img style="width: 70%" src="../assets/preview3.gif" alt />
		        	</div>
                    <div v-if="code>58">
				<img style="width: 70%" src="../assets/preview4.gif" alt />
		        	</div>
                    <div v-if="code>78">
				<img style="width: 70%" src="../assets/preview5.gif" alt />
		        	</div>
                    </el-col>
                
            </el-row>
        </el-card>
    </div>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" direction=ttb size="1100">
        <el-row :gutter="10" type="flex" justify="center" style="color:indianred">MBTI测试前须知</el-row>
        <el-row :gutter="10" type="flex" justify="center">1、参加测试的人员请务必诚实、独立地回答问题，只有如此，才能得到有效的结果。</el-row>
        <el-row :gutter="10" type="flex" justify="center">2、《性格分析报告》展示的是你的性格倾向，而不是你的知识、技能、经验。</el-row>
        <el-row :gutter="10" type="flex" justify="center">3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。</el-row>
        <el-row :gutter="20" type="flex" justify="center">
            每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。</el-row>
        <el-row :gutter="10" type="flex" justify="center">4、本测试共93题；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择</el-row>
        <el-row :gutter="10" type="flex" justify="center" style="color:indianred">
            只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。希望你能从中或多或少地获得一些有益的信息。</el-row>
    </el-drawer>
    <!-- 结果框 -->
    <el-dialog v-model="dialogVisible" title="问卷完成啦，你的测试结果是:" width="50%" :before-close="goback" :close-on-click-modal="true">
    <div>
        <el-row justify="center"><span style="color:slateblue;font-size:xx-large;">{{addForm.mbti }}-{{character[addForm.mbti]}}</span></el-row>
        <el-row justify="center"><el-link type="primary" :underline="false" href="https://baike.baidu.com/item/%E8%BF%88%E5%B0%94%E6%96%AF%E5%B8%83%E9%87%8C%E6%A0%BC%E6%96%AF%E7%B1%BB%E5%9E%8B%E6%8C%87%E6%A0%87?fromtitle=MBTI&fromid=3112373#3_4">详情点击进行进一步了解</el-link></el-row>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false;goback()">好的</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { h } from "vue";
import { ElNotification } from "element-plus";
import { ref } from "vue";
import {
    ChatDotRound,
    ChatLineRound,
    ChatRound,
} from "@element-plus/icons-vue";
export default {
    name: "Test",
    data() {
        return {
            title: "",
            sectionA: "",
            sectionB: "",
            code: 1,
            Topic: [],
            drawer: false,
            choose:{E:0,I:0,S:0,N:0,T:0,F:0,J:0,P:0},
            dialogVisible:false,
            addForm:{
                studentNo:window.sessionStorage.getItem('studentNo'),
                mbti:"",
                answer:"",
            },
            mylist:"",
            character:{
                ISTJ:"物流师",ISTP:"鉴赏家",ESTP:"企业家",ESTJ:"总经理",
                ISFJ:"守卫者",ISFP:"探险家",ESFP:"表演家",ESFJ:"执政官",
                INFJ:"提倡者",INFP:"调停者",ENFP:"竞选者",ENFJ:"主人公",
                INTJ:"建筑师",INTP:"逻辑学家",ENTP:"辩论家",ENTJ:"指挥官"},
        }
    },
    methods: {
        async getTopic() {
            const { data: res } = await this.$http.get("api/gettopic");
            this.Topic = res.data.Topic
            this.title = this.Topic[0].Title
            this.sectionA = this.Topic[0].SectionA
            this.sectionB = this.Topic[0].SectionB
        },
        async turn() {
            if (this.code <= 92) {
                this.code += 1;
                // console.log(this.code);
                this.title = this.Topic[this.code - 1].Title
                this.sectionA = this.Topic[this.code - 1].SectionA
                this.sectionB = this.Topic[this.code - 1].SectionB

            } else if (this.code == 93) {
                this.addForm.answer = this.mylist
                if(this.choose.E > this.choose.I){this.addForm.mbti +="E"}
                    else{this.addForm.mbti += "I"}
                if(this.choose.S > this.choose.N){this.addForm.mbti +="S"}
                    else{this.addForm.mbti += "N"}
                if(this.choose.T > this.choose.F){this.addForm.mbti +="T"}
                    else{this.addForm.mbti += "F"}
                if(this.choose.J > this.choose.P){this.addForm.mbti +="J"}
                    else{this.addForm.mbti += "P"}
                console.log(this.choose)//选项集合
                console.log(this.addForm.mbti) //结果 
                const { data: res } = await this.$http.post("api/addresult", this.addForm);
                this.dialogVisible = true
                console.log(res)//后端返回数据
                }
        },
        goback(){
            this.$router.push({
				path: "/welcome"
			})
        },
        chooseA() {
            this.choose[this.Topic[this.code-1].ValueA]++
            this.mylist+="A"
            console.log(this.mylist)
        },
        chooseB() {
            this.choose[this.Topic[this.code-1].ValueB]++
            this.mylist +="B"
            console.log(this.mylist)
        },
        messageA() {
            ElNotification({
                title: "您已选择了A",
                message: h("i", { style: "color: coral" }, "选项只有一次机会"),
            });
        },
        messageB() {
            ElNotification({
                title: "您已选择了B",
                message: h("i", { style: "color: coral" }, "选项只有一次机会"),
            });
        },
    },
    created() {
        this.code = 1;
    },
    mounted() {
        this.getTopic();
        this.drawer = true
    },

    setup() {
        const activeNames = ref([""]);
        const value = ref();
        const icons = [ChatRound, ChatLineRound, ChatDotRound];
        return { activeNames, value, icons };
    },
};
</script>

<style>
.test {
    text-align: center;
    color: rgb(21, 126, 126);
    font-family: fantasy
}

.el-row {
    margin-bottom: 30px;
}

.press {
    height: 50px;
    width: 100%;
    background: transparent;
    display: block;
    margin: 0 auto;
    border: 2px solidwhitesmoke;
    color: black;
    box-shadow: 5px 6px 10px rgb(115, 130, 130);
}

</style>
